<template>
    <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
    import {defineComponent, PropType, ref, Ref,reactive,watchEffect} from 'vue';
    import {useECharts} from '/@/hooks/web/useECharts';
    import { GaugeChart } from 'echarts/charts';
    export default defineComponent({
        name: "Gauge",
        props: {
            chartData:{
                type: Object as PropType<Object>,
                default: () => ([]),
            },
            option:{
                type: Object,
                default: () => ({}),
            },
            width: {
                type: String as PropType<string>,
                default: '100%',
            },
            height: {
                type: String as PropType<string>,
                default: 'calc(100vh - 78px)',
            },
        },
        setup(props) {
            const chartRef = ref<HTMLDivElement | null>(null);
            const {setOptions, echarts} = useECharts(chartRef as Ref<HTMLDivElement>);
            const option = reactive({
                series: [
                    {
                        type: 'gauge',
                        progress: {
                            show: true,
                            width: 12,
                        },
                        axisLine: {
                            lineStyle: {
                                width: 12,
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            length: 12,
                            lineStyle: {
                                width: 1,
                                color: '#999',
                            },
                        },
                        axisLabel: {
                            distance: 25,
                            color: '#999',
                            fontSize: 12,
                        },
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 20,
                            itemStyle: {
                                borderWidth: 5,
                            },
                        },
                        title: {},
                        detail: {
                            valueAnimation: true,
                            fontSize: 25,
                            formatter: '{value}%',
                            offsetCenter: [0, '80%'],
                        },
                        data: [
                            {
                                value: 70,
                                name: '本地磁盘',
                            },
                        ],
                    },
                ],
            });
            
            watchEffect(() => {
                props.chartData && initCharts();
            });
            
            function initCharts(){
                echarts.use(GaugeChart);
                if(props.option){
                    Object.assign(option,props.option);
                }
                option.series[0].data[0].name = props.chartData.name;
                option.series[0].data[0].value = props.chartData.value;
                setOptions(option);
            }
            return {chartRef};
        }
    });
</script>
